// DetailsScreen.js
import React from "react";
import { View, Text } from "react-native";
import useRem from "../rem/rem";
let list = [
  {
    id: 1,
    name: "医药代表拜访",
    proname: "张三",
    pro: "销售总监",
    classnum: "20",
    Exam: "20",
    class_time: "2小时",
    study: "已学30%",
    text: "4.29MB",
    up_time: "2020-02-03",
    xiazai: "下载50%",
    img1: "https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E9%A6%96%E9%A1%B5/u142.png",
    img2: "https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u261.svg",
  },
  {
    id: 2,
    name: "疾病预防",
    proname: "李四",
    pro: "医学部总监",
    classnum: "20",
    Exam: "20",
    class_time: "2小时",
    study: "已学30%",
    text: "4.29MB",
    up_time: "2020-02-03",
    xiazai: "下载50%",
    img1: "https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E9%A6%96%E9%A1%B5/u142.png",
    img2: "https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u261.svg",
  },
  {
    id: 3,
    name: "疾病预防",
    proname: "李四",
    pro: "医学部总监",
    classnum: "20",
    Exam: "20",
    class_time: "2小时",
    study: "已学30%",
    text: "4.29MB",
    up_time: "2020-02-03",
    xiazai: "下载50%",
    img1: "https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u244.png",
    img2: "https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u261.svg",
  },
  {
    id: 4,
    name: "疾病预防",
    proname: "李四",
    pro: "医学部总监",
    classnum: "20",
    Exam: "20",
    class_time: "2小时",
    study: "已学30%",
    text: "4.29MB",
    up_time: "2020-02-03",
    xiazai: "下载50%",
    img1: "https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u246.png",
    img2: "https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u261.svg",
  },
  {
    id: 5,
    name: "疾病预防",
    proname: "李四",
    pro: "医学部总监",
    classnum: "20",
    Exam: "20",
    class_time: "2小时",
    study: "已学30%",
    text: "4.29MB",
    up_time: "2020-02-03",
    xiazai: "下载50%",
    img1: "https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u248.png",
    img2: "https://www.axured.cn/assets/axurefiles/5de3ba9d7ae51c5f61f5957cf99b9e81_477/images/%E5%9C%A8%E7%BA%BF%E5%9F%B9%E8%AE%AD/u261.svg",
  },
];
export default function ClassKao() {
  const { rem } = useRem();

  return (
    <div>
      <div
        style={{
          width: rem(375),
          height: rem(44),
          background: "#fff",
          lineHeight: rem(2),
          fontSize: rem(16),
        }}
      >
        <span style={{fontSize:rem(20)}}>{'<'}</span>我的下载
      </div>
      <div style={{ width: rem(375), height: rem(733), background: "#D1D1D1" }}>
        {list.map((t) => (
          <div
            style={{
              width: rem(375),
              height: rem(133),
              background: "#FFFFFF",
              marginTop: rem(5),
              display: "flex",
              justifyContent: "space-around",
            }}
          >
            <div
              style={{
                width: rem(120),
                height: rem(165),
                position: "relative",
              }}
            >
              <img
                src={t.img1}
                style={{ width: rem(120), height: rem(90), marginTop: rem(14) }}
                alt=""
              />
              <img
                src={t.img2}
                alt=""
                style={{
                  width: rem(30),
                  height: rem(30),
                  marginTop: rem(14),
                  position: "absolute",
                  left: rem(54),
                  bottom: rem(104),
                }}
              />
            </div>
            <div style={{ width: rem(230), height: rem(165) }}>
              <div
                style={{
                  width: rem(104),
                  height: rem(19),
                  fontSize: rem(14),
                  fontWeight: "bold",
                  marginTop: rem(17),
                }}
              >
                {t.name}
              </div>

              <div
                style={{
                  width: rem(210),
                  height: rem(16),
                  fontSize: rem(12),
                  fontWeight: "bold",
                  // display: "flex",
                  // justifyContent: "space-around",
                  marginTop: rem(14),
                  color: "#999999",
                }}
              >
                <div
                  style={{
                    width: rem(116),
                    height: rem(16),
                    display: "inline-block",
                    
                  }}
                >
                  文件大小:{t.text}
                </div>
              </div>
              <div
                style={{
                  width: rem(228),
                  height: rem(16),
                  fontSize: rem(12),
                  fontWeight: "bold",
                  marginBottom: rem(18),
                  marginTop: rem(14),
                  color: "#999999",
                }}
              >
                <div style={{ marginTop: rem(14) }}>上传时间:{t.up_time}</div>
              </div>

              <div
                style={{
                  width: rem(160),
                  height: rem(6),
                  background: "gray",
                  borderRadius: rem(10),
                  display: "inline-block",
                }}
              >
                <div
                  style={{
                    width: rem(60),
                    height: rem(5),
                    background: "#0079FE",
                    borderRadius: rem(10),
                  }}
                ></div>
              </div>
              <div
                style={{
                  width: rem(68),
                  height: rem(16),
                  color: "#999999",
                  fontSize: rem(12),
                  marginTop: rem(1),
                  display: "inline-block",
                }}
              >
                {t.xiazai}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
